<template>
	<view class="container">
		<!-- 文章列表单排大图 -->
		<view class="list-one-w" v-for="(pos ,index) in postList" :key="pos.aid" @tap="posTap(pos.aid)">
			<view class="list-one-img">
				<image class="fengrui-img" :src="pos.url" mode="aspectFill"></image>
			</view>
			<view class="list-one-data-w">
				<view class="list-one-title">
					{{ pos.article_title}}
				</view>
				<view class="list-ona-abstract">
					{{pos.article_introduction}}
				</view>
				<view class="list-one-qu">
					<view class="list-one-time">
						<view class="list-one-time-y"></view>
						<view class="list-one-time-n">
							时间：{{pos.article_create_time}}
						</view>
					</view>
					<view class="list-one-time">
						<view class="list-one-time-l"></view>
						<view class="list-one-time-n">
							阅读：{{pos.article_read_num}}
						</view>
					</view>
					<view class="list-one-time">
						<view class="list-one-time-h"></view>
						<view class="list-one-time-n">
							评论：{{pos.article_comment_num}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 没有内容 -->
		<view class="no-datalist" v-if="data_no">
			<view class="no-img">
				<image class="fengrui-img" src="../../static/data/data-no.svg" mode=""></image>
			</view>
			<view class="no-text">
				您搜索的世界不存在！或者和小姐姐跑了......
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				// 判断是否有数据
				data_no: false,
				// 搜索数据
				keyword: '',
				page: 1,
				pageSize: 10,
				// 文章列表
				postList: [],
				type: 0
			}
		},
		// 页面打开函数
		onLoad(option) {
			this.keyword = option.keyword
			this.type = option.type;
			if (this.keyword) {
				this.getArticleList();
			}
			console.log(this.type)
			if (this.type) {
				switch (this.type) {
					case '1':
						uni.setNavigationBarTitle({
							title: "我的点赞"
						})
						this.getArticlePraise();
						break;
					case '2':
						uni.setNavigationBarTitle({
							title: "我的评论"
						})
						this.getCommentList();
						break;
				}
			}
		},
		// 监听触底
		onReachBottom() {
			this.page = this.page + 1,
				this.getArticleList();
		},
		methods: {
			//获取文章列表
			getArticleList: function() {
				var that = this;
				var postData = {
					page: that.page,
					pageSize: that.pageSize,
					keyword: that.keyword
				}
				//传输信息
				app.request('/Article/searchArticle', postData, 'POST',
					function(res) {
						if (res.data.code == 1) {
							// console.log(that.keyword)
							that.postList = that.postList.concat(res.data.data);
						}
						if (res.data.data.length == 0) {
							// console.log('没有内容')
							that.data_no = true
						}

					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					},

				);
			},
			//获取文章点赞列表
			getArticlePraise() {
				var that = this;
				const user_id = uni.getStorageSync("user_id");
				var postData = {
					user_id: user_id,
					page: that.page,
					pageSize: that.pageSize
				}
				//传输信息
				app.request('/Article/getArticlePraise', postData, 'GET',
					function(res) {
						if (res.data.code == 1) {
							// console.log(that.keyword)
							that.postList = that.postList.concat(res.data.data);
						}
						if (res.data.data.length == 0) {
							// console.log('没有内容')
							that.data_no = true
						}

					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					},

				);
			},
			//文章评论列表
			getCommentList() {
				var that = this;
				const user_id = uni.getStorageSync("user_id");
				var postData = {
					user_id: user_id,
					page: that.page,
					pageSize: that.pageSize
				}
				//传输信息
				app.request('/Article/getUserComment', postData, 'GET',
					function(res) {
						if (res.data.code == 1) {
							// console.log(that.keyword)
							that.postList = that.postList.concat(res.data.data);
						}
						if (res.data.data.length == 0) {
							// console.log('没有内容')
							that.data_no = true
						}

					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					},

				);

			},
			// 文章详情跳转
			posTap: function(e) {
				var posId = e;
				uni.navigateTo({
					url: "../data/data?aid=" + posId
				})
			},
		},
		// 分享小程序界面
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '小程序名字id',
				path: '/pages/index/index',
				imageUrl: ''
			}

		},
	}
</script>

<style>
	/* 没有数据时候 */
	.no-text {
		color: #ADADAD;
	}

	.no-img {

		height: 400rpx;
		width: 400rpx;
	}

	.no-datalist {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* 文章列表单排 */
	.list-one-time-n {
		color: #D3D3D3;
		font-size: 10px;
		height: 16rpx;
		line-height: 16rpx;
		margin-left: 8rpx;
	}

	.list-one-time-h {
		height: 18rpx;
		width: 18rpx;
		border-radius: 50rpx;
		background-color: #FD6D6D;
	}

	.list-one-time-l {
		height: 18rpx;
		width: 18rpx;
		border-radius: 50rpx;
		background-color: #70DDF0;
	}

	.list-one-time-y {
		height: 18rpx;
		width: 18rpx;
		border-radius: 50rpx;
		background-color: #4FABFA;
	}

	.list-one-time {
		display: flex;
		margin-top: 18rpx;
		margin-left: 18rpx;

	}

	.list-one-qu {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.list-ona-abstract {
		color: #ADADAD;
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-top: 16rpx;
	}

	.list-one-title {
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.list-one-data-w {
		margin: 28rpx;
	}

	.list-one-img {
		height: 280rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.list-one-w {
		box-shadow: 0px 6px 9px rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;
		margin: 0rpx 0rpx 70rpx 0rpx;
		overflow: hidden;
	}

	.container {
		padding: 40rpx;
	}

	.fengrui-img {
		height: 100%;
		width: 100%;
	}
</style>
